<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String path = request.getContextPath();%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="/web/manager/inc/header.jsp"></jsp:include>
        <style>
        	.color{
        		background-color: red;
        	}
       </style>
       <!-- body  开始   -->        
                <div class="row page-titles mx-0">
                    <div class="col-lg-12 p-md-0">
                        <h4 class="text-primary">欢迎进入后台管理
                        </h4>
                    </div>
                </div>
                
                <div class="new-patients main_container">
                    <div class="row">
                        <div class="col-sm-6 col-xl-3 col-lg-6">
                            <div class="widget card card-primary">
                                <div class="card-body">
                                    <div class="media text-center">

                                        <div class="media-body">
                                            <span class="text-white">禁言用户数量</span>
                                            <h3 class="mb-0 text-white" id="spack"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xl-3 col-lg-6">
                            <div class="widget card card-danger">
                                <div class="card-body">
                                    <div class="media text-center">

                                        <div class="media-body">
                                            <span class="text-white">拉黑用户数量</span>
                                            <h3 class="mb-0 text-white" id="black"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xl-3 col-lg-6">
                            <div class="widget card card-primary">
                                <div class="card-body">
                                    <div class="media text-center">

                                        <div class="media-body">
                                            <span class="text-white">用户数量</span>
                                            <h3 class="mb-0 text-white" id="user"></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-xl-3 col-lg-6">
                            <div class="widget card card-primary">
                                <div class="card-body">
                                    <div class="media text-center">

                                        <div class="media-body">
                                            <span class="text-white">发帖子数量</span>
                                            <h3 class="mb-0 text-white" id="post"> </h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					
                    <div class="row">
                    
                        <div class="col-md-12" id="but">
                              <button class="badge badge-primary" id="userList" onclick="userList()">所有用户</button>
			                   <button class="badge badge-primary" id="blackList" onclick="blackList()">拉黑用户</button>
			                    <button class="badge badge-primary" id="spackList" onclick="spackList()">禁言用户</button>
                        
                            <div class="card shadow">
                            
                                <div class="card-header">
                                    <h4 class="card-title">用户统计列表</h4>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="example1" class="display nowrap">
                                        
                                            <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>昵称</th>
                                                    <th>账号</th>
                                                    <th>帖子数量</th>
                                                    <th>是否被禁言</th>
                                                    <th>是否被拉黑</th>
                                                    <th>是否被举报</th>
                                                </tr>
                                            </thead>
                                            <tbody id="list">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                 <p id="countPage">
                                 共有<span id="pageNum"></span>条记录 
                                 </p>
                            </div>
                        </div>
                    </div>
                </div>
            <script>
            	
            </script>
            <!-- body 结束 -->
            
        <jsp:include page="/web/manager/inc/footer.jsp"></jsp:include>
        <style>
        	#whichPage{
        		color:red;
        		width:20px;
        		height: 20px;
        		margin-left:10px;
        		padding:0;
        		background-color: #ccc;
        		display: block;
        		text-align: center;
        		border-radius: 3px;
        		cursor: pointer;
        	}
        	#countPage{
        		padding-left: 300px;
        		display:flex;;
        	}
        </style>
        <script type="text/javascript">
					var path = "${pageContext.request.contextPath}";
					var num=${applicationScope.configMap.page_size};//页数
						$(function(){
							// 点击改变按钮背景颜色
							$("#but>button").on("click",function(){
								$("#but>button").removeClass("color");
								$(this).addClass("color");
							})
							//ajax数字获取
							$.getJSON(path+"/ManagerController?action=countNum",function(data){
								var num= data;
								$("#spack").html(num.spack);
								$("#black").html(num.black);
								$("#user").html(num.user);
								$("#post").html(num.post);
								
							})
							refresh();
							
						})
							function refresh(){
							//ajax 获取默认的所有用户列表
								$("#list").load(path+"/ManagerController?action=userList&pageNum=0",function(){
									var setTime = setTimeout(function () { 
										($("tbody").find("span:contains(是)")).css("background-color","red");
										});
									}, 300);
								//获取页数，
								refreshPage();
								
							}
					      //刷新页码 page 获得页码的数量，
							function refreshPage(){
					    	  //清除到原来的页码
								$.post(path+"/ManagerController?action=pageNumber",function(data){
									$("#pageNum").html(data);
									var countPage ;
									//console.log("num--"+num);
									if(data%num == 0){
										countPage=data/num;
									}
									else{
										countPage=Math.ceil(data/num);
									}
									for(var i=0;i<countPage;i++){
										$("#countPage").append("<a onclick='change(this)' id='whichPage' data-page='"+i+"' >"+(i+1)+"</a>")
									}
								})
							}
					      	//切换到 所有用户列表
					      	function userList(){
					      		$("#countPage>a").remove();
					      		refresh();
					      	}
					      	
					      	
							//切换到 黑名单列表
							function blackList(){
								refreshBlack();//获取黑名单用户
								refreshBlackPage();//黑名单的人员页码
							}
							function changeBlackPage(obj){
								$("#list").load(path+"/ManagerController?action=blackList&pageNum="+$(obj).data("page"),function (){
										var setTime = setTimeout(function () { 
										($("tbody").find("span:contains(是)")).css("background-color","red");
										}, 300); 
										}
									);
							}
							function refreshBlack(){
								$("#list").load(path+"/ManagerController?action=blackList&pageNum=0",function(){
									var setTime = setTimeout(function () { 
										($("tbody").find("span:contains(是)")).css("background-color","red");
										});
									}, 300);
							}
							function refreshBlackPage(){
								$("#countPage>a").remove();
								$.post(path+"/ManagerController?action=pageNumberBlack",function(data){
									$("#pageNum").html(data);
									var countPage ;
									//console.log("num--"+num);
									if(data%num == 0){
										countPage=data/num;
									}
									else{
										countPage=Math.ceil(data/num);
									}
									for(var i=0;i<countPage;i++){
										$("#countPage").append("<a onclick='changeBlackPage(this)' id='whichPage' data-page='"+i+"' >"+(i+1)+"</a>")
									}
								})
							}
							
							//切换到 禁言列表
							function spackList(){
								refreshSpack();//获取黑名单用户
								refreshSpackPage();//黑名单的人员页码
							}
							function refreshSpack(){  //默认刷新第一页 
								$("#list").load(path+"/ManagerController?action=spackList&pageNum=0",function(){
									var setTime = setTimeout(function () { 
										($("tbody").find("span:contains(是)")).css("background-color","red");
										});
									}, 300);
							}
							function refreshSpackPage(){//改变页码
								$("#countPage>a").remove();
								$.post(path+"/ManagerController?action=pageNumberSpack",function(data){
									$("#pageNum").html(data);
									var countPage ;
									//console.log("num--"+num);
									if(data%num == 0){
										countPage=data/num;
									}
									else{
										countPage=Math.ceil(data/num);
									}
									for(var i=0;i<countPage;i++){
										$("#countPage").append("<a onclick='changeSpackPage(this)' id='whichPage' data-page='"+i+"' >"+(i+1)+"</a>")
									}
								})
							}
							//点击事件，更改对应页码的内容
							function changeSpackPage(obj){
								$("#list").load(path+"/ManagerController?action=spackList&pageNum="+$(obj).data("page"),function (){
										var setTime = setTimeout(function () { 
										($("tbody").find("span:contains(是)")).css("background-color","red");
										}, 300); 
										}
									);
							}
						//改变页数：
							function change(obj){
										console.log("当前页数："+$(obj).data("page"));
										$("#list").load(path+"/ManagerController?action=userList&pageNum="+$(obj).data("page"),function (){
												var setTime = setTimeout(function () { 
												($("tbody").find("span:contains(是)")).css("background-color","red");
												}, 300); 
												}
											);
							}
					
							//强制清楚模板的无用信息
						$(function(){
            				$("#example1_paginate").remove();
            				$("#example1_info").remove();
            			})
					</script>